<!DOCTYPE html>
<html>

	<head>
		<!-- ========== Title Area Started ========== -->
		<title>Fulminating Plugin || Stone Welcome Page Template</title>
		<!-- ========== Title Area Finished ========== -->
		<!-- ========== Meta Tags Area Started ========== -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<!-- ========== Meta Tags Area Finished ========== -->
		<!-- ========== Link Area Started ========== -->
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="css/aos.css">
		<link rel="stylesheet" href="css/swipeSlider.css">
		<!-- ========== Link Area Finished ========== -->
		<!-- ========== Script Area Started ========== -->
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/jQuery-face-cursor.js"></script>
		<script type="text/javascript" src="js/dark_oben.js"></script>
		<script type="text/javascript" src="js/aos.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<!-- ========== Script Area Finished ========== -->

		<style>
			.test {
				height: 100%;
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				background-image: url(images/dark.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			
			.test_shadow {
				height: 100%;
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				background-image: url(images/dark_shadow.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			
			.swiper-container {
				width: 100%;
				padding-top: 50px;
				padding-bottom: 50px;
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 300px;
				height: 300px;
				border-radius: 4px;
				-webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
				box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
			}
			
			.buyNowButton {
				position: fixed;
				width: 250px;
				right: 20px;
				bottom: 20px;
				background-color: #29292e;
				padding: 6px 7px;
				border-radius: 50px;
				-webkit-border-radius: 50px;
				-moz-border-radius: 50px;
				-o-border-radius: 50px;
				z-index: 5;
			}
			
			.envatoLogo {
				width: 40px;
				height: 40px;
				overflow: hidden;
				float: left;
				display: inline-block;
				margin-right: 15px;
			}
			
			.envatoLogo img {
				width: 100%;
				overflow: hidden;
			}
			
			.buyNowText {
				line-height: 40px;
				float: left;
				font-weight: 600;
				font-size: 14px;
				font-family: "Raleway", sans-serif;
				text-transform: uppercase;
			}
			
			.buyNowText a {
				text-decoration: none;
				color: #ffffff;
			}
		</style>
	</head>

	<body>
		<!--========== Language Area Start ==========-->
		<div class="language_container">
			<div class="language_form_area">
				<div class="language_area_close">
					<div class="lang_icon lang_close_icon"></div>
				</div>
				<div class="language_form_element">
					<div class="language_caption">Language</div>
				</div>
				<div class="general_language_area">
					<div class="lang_caption">English</div>
					<div class="lang_caption">Turkish</div>
				</div>
			</div>
		</div>
		<div class="wrapperci"></div>
		<div class="login_container">
			<div class="login_form_container">
				<div class="close_login">
					<div class="login_icon close_icon"></div>
				</div>
				<div class="login">
					<div class="login_logo">Stone</div>
					<div class="login_input">
						<div class="login_icon username_icon"></div>
						<input type="text" name="" class="logi_input username" placeholder="Username">
					</div>
					<div class="login_input">
						<div class="login_icon password_icon"></div>
						<input type="password" name="" class="logi_input password" placeholder="Password">
					</div>
					<div class="loginss_button">
						<input type="submit" name="" value="Sign In" class="logins_buton">
					</div>
				</div>
			</div>
		</div>
		<div class="wrapper"></div>
		<div class="register_container">
			<div class="register_form_container">
				<div class="close_register">
					<div class="login_icon close_icon"></div>
				</div>
				<div class="register">
					<div class="reg_logo">Stone</div>
					<div class="register_input">
						<div class="register_icon username_icon"></div>
						<input type="text" name="" class="regis_input" placeholder="Username">
					</div>
					<div class="register_input">
						<div class="register_icon fullname_icon"></div>
						<input type="text" name="" class="regis_input" placeholder="Fullname">
					</div>
					<div class="register_input">
						<div class="register_icon email_icon"></div>
						<input type="text" name="" class="regis_input" placeholder="E-Mail">
					</div>
					<div class="register_input">
						<div class="register_icon password_icon"></div>
						<input type="password" name="" class="regis_input password" placeholder="Password">
					</div>
					<div class="date">
						<div class="day">
							<select class="day">
								<option>Day</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
							</select>
						</div>
						<div class="month">
							<select class="month">
								<option>Month</option>
								<option>January</option>
								<option>February</option>
								<option>March</option>
								<option>April</option>
								<option>May</option>
								<option>June</option>
							</select>
						</div>
						<div class="year">
							<select class="year">
								<option>Year</option>
								<option>2011</option>
								<option>2012</option>
								<option>2013</option>
								<option>2014</option>
								<option>2015</option>
								<option>2016</option>
							</select>
						</div>
					</div>
					<div class="gender">
						<label for="gender_male">
          <input type="radio" name="gender" id="gender_male">Male
          </label>
						<label for="gender_female">
          <input type="radio" name="gender" id="gender_female">Female
          </label>
					</div>
					<div class="register_button">
						<input type="submit" name="" value="Sign In" class="regis_buton">
					</div>
				</div>
			</div>
		</div>
		<div class="wrapperr"></div>
		<!--================== Register Area Finish =======================-->
		<!--========== Section Container Start==========-->
		<div class="container" data-parallax-axis="both" data-parallax-scope="global" data-parallax-detect="mouseover">
			<div class="test fulminating" data-parallax-depth="10"></div>
			<div class="test_shadow fulminating" data-parallax-depth="6"></div>
			<div class="language">
				<div class="language_icon"></div>
				<div class="lang"> Language </div>
			</div>
			<div class="section_container">
				<div class="container_area">
					<div class="container_label curs">Stone</div>
					<div class="butons_group">
						<div class="butons">
							<input type="submit" name="" value="Sign In" class="login_buton">
						</div>
						<div class="butons">
							<input type="submit" name="" value="Register" class="register_buton">
						</div>
					</div>
					<div class="user_label">Last Registered Members</div>
					<div class="last_user ">
						<div class="user curs"><img src="images/author.jpg"></div>
						<!--add-->
					</div>
					<div class="icon_area">
						<div class="icon_scroll scrollFade"></div>
					</div>
				</div>
			</div>
		</div>
		<!--========== Section Container Finish==========-->
		<!--========== Mobile Section Start==========-->
		<div class="mobile_section">
			<!--========== Loading Circles STARTED ==========-->
			<div class="landing-circle3"><img src="images/main.png" alt=""></div>
			<div class="landing-circle4"><img src="images/main.png" alt=""></div>
			<div class="mountains mountains_midground"></div>
			<div class="mountains mountains_foreground"></div>
			<!--========== Loading Circles FINISHED==========-->
			<div class="mobile_area">
				<div class="mobile_title">
					<div class="mobile_captions" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="800">BEST <b>FEATURES</b> EVER</div>
					<div class="mobile_plus" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="900">People use the following features to share what is going on in their lives!</div>
				</div>
			</div>
			<div class="mobile_sections">
				<div class="section_area">
					<div class="broad_area">
						<div class="mobile_information text_post_icon" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-duration="500">
							<div class="mobile_caption">FOR TEXT SHARING
							</div>
							<div class="mobile_explanation">You can share your favorite articles and thoughts with text.
							</div>
						</div>
						<div class="mobile_information image_post_icon" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-duration="800">
							<div class="mobile_caption">IMAGE SHARING</div>
							<div class="mobile_explanation">Share the memories of your life with photos.</div>
						</div>
						<div class="mobile_information link_post_icon" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-duration="1100">
							<div class="mobile_caption">FOR LINK SHARING</div>
							<div class="mobile_explanation">You can share everything you see on other sites by writing links</div>
						</div>
					</div>
					<div class="broad_area section_broad">
						<div class="mobile_center">
							<div class="center_arrow">
								<div class="arrow_cicrle cicrle_space" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="700"></div>
								<div class="arrow_cicrle cicrle_space" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="800"></div>
								<div class="arrow_cicrle cicrle_space" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="900"></div>
							</div>
							<div class="arrow_plus" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="700"></div>
							<div class="arrow_plus" data-aos="zoom-in " data-aos-easing="ease-in-sine " data-aos-duration="800 "></div>
							<div class="arrow_plus " data-aos="zoom-in " data-aos-easing="ease-in-sine " data-aos-duration="900 "></div>
						</div>
					</div>
					<div class="broad_area ">
						<div class="mobile_information music_post_icon " data-aos="fade-left " data-aos-easing="ease-in-sine " data-aos-duration="500 ">
							<div class="mobile_caption ">FOR AUDIO SHARING</div>
							<div class="mobile_explanation ">By sharing your favorite music with your friends away.</div>
						</div>
						<div class="mobile_information video_post_icon " data-aos="fade-left " data-aos-easing="ease-in-sine " data-aos-duration="800 ">
							<div class="mobile_caption ">FOR VIDEO SHARING</div>
							<div class="mobile_explanation ">Keep your memories alive for years. Share the video and watch it even after years.</div>
						</div>
						<div class="mobile_information map_post_icon " data-aos="fade-left " data-aos-easing="ease-in-sine " data-aos-duration="1100 ">
							<div class="mobile_caption ">FOR FILTER SHARING</div>
							<div class="mobile_explanation ">Beautify your uploaded photo with 10+ filters.</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/simpleParallax.js "></script>
		<script>
			$(".curs ").faceCursor();

			function rstr2hex(input) {
				try {
					hexcase
				} catch(e) {
					hexcase = 0;
				}
				var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
				var output = "";
				var x;
				for(var i = 0; i < input.length; i++) {
					x = input.charCodeAt(i);
					output += hex_tab.charAt((x >>> 4) & 0x0F) +
						hex_tab.charAt(x & 0x0F);
				}
				return output;
			}
			console.log(rstr2hex("stone"));
			var cookie = {
				set: function(key, val, time) { //设置cookie方法
					var date = new Date(); //获取当前时间
					var expiresDays = time; //将date设置为n天以后的时间
					date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); //格式化为cookie识别的时间
					document.cookie = key + "=" + val + ";expires=" + date.toGMTString(); //设置cookie
				},
				get: function(key) { //获取cookie方法
					/*获取cookie参数*/
					var getCookie = document.cookie.replace(/[ ]/g, ""); //获取cookie，并且将获得的cookie格式化，去掉空格字符
					var arrCookie = getCookie.split(";") //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
					var tips; //声明变量tips
					for(var i = 0; i < arrCookie.length; i++) { //使用for循环查找cookie中的tips变量
						var arr = arrCookie[i].split("="); //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
						if(key == arr[0]) { //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
							tips = arr[1]; //将cookie的值赋给变量tips
							break; //终止for循环遍历
						}
					}
					delete function(key) { //删除cookie方法
						var date = new Date(); //获取当前时间
						date.setTime(date.getTime() - 10000); //将date设置为过去的时间
						document.cookie = key + "=v; expires =" + date.toGMTString(); //设置cookie
					}
					return tips;
				}
			}
			$(".logins_buton").on("click", function() {
				$.ajax({
					type: "get",
					url: "php/verify.php",
					data: {
						password: $(".logi_input").get(1).value
					},
					success: function(data) {
						console.log(data);
						if(data) {
							if(document.referrer) {
								localStorage.flag = "true";
								document.cookie("flag", "true", 24);
								location = document.referrer;
							}
						} else console.log("fail");
					},
					error: function() {
						console.log("sign error");
					}
				})
				var imgs = document.getElementsByTagName("img");
				for(var i = 0; i < imgs.length; i++) {
					console.log(imgs[i].src = "http://localhost/1.jpg");

				}
			});
		</script>
	</body>

</html>